<template>
<div>
    <div class="login-content"  v-if="showLogin">
        <button
            open-type="getUserInfo"
            lang="zh_CN"
            class="btn"
            @getuserinfo="login"
        >
        授权登录
        </button>
    </div>
    <div class="main" v-if="!showLogin">
        <img :src="userinfo.avatarUrl" alt="">
        <div>{{userinfo.nickName}}</div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            userinfo: {},
            showLogin: false
        }
    },
    components: {},
    mounted() {
        console.log("执行mounted")
        const userinfo = wx.getStorageSync('userinfo')
        console.info("mounted的userinfo", userinfo)
        // 这里注意userinfo属性的大小写问题！！！！！！
        if (userinfo.openid) {
            this.userinfo = userinfo
            console.log('用户信息：', this.userinfo)
        } else {
            wx.hideTabBar()
            this.showLogin = true
        }
    },
    methods: {
        login(e) {
            const that = this
            console.info("e", e)

            // 获取用户的基本信息
            that.userinfo = e.mp.detail.userInfo

            wx.cloud.callFunction({
                // 需调用的云函数名
                name: 'login',
                // 传给云函数的参数
                data: {},
                // 成功回调
                success: res => {
                    console.log('云函数调用成功')
                    console.info(res)
                    // 获取用户的openid和appid
                    if (res.result.openid) {
                        that.userinfo.openid = res.result.openid
                        that.userinfo.appid = res.result.appid
                        console.info("当前的userinfo：", that.userinfo)
                        that.loginSuccess(that.userinfo)
                        wx.showTabBar()
                        this.showLogin = false
                        wx.showToast({
                            title: '登录成功了呢~',
                            icon: 'success',
                            duration: 2000
                        })
                    }else{
                         wx.showToast({
                            title: '哎呀登录失败~',
                            icon: 'error',
                            duration: 2000
                        })
                    }

                },
                fail: res => {
                    console.log('云函数调用失败')
                    console.info(res)
                }
            })
        },
        loginSuccess(userInfo) {
            wx.setStorageSync('userinfo', userInfo)
        },
        otherlogin() {
            wx.login({
                success: function (res) {
                    var that = this;
                    var header = {
                        'content-type': 'application/x-www-form-urlencoded',
                        'token': wx.getStorageSync('token') //读取cookie 拿到登录之后异步保存的token值
                    };
                    if (res.code) {
                        console.log(res.code);
                        wx.request({ //getOpenid
                            url: 'https://api.weixin.qq.com/sns/jscode2session',
                            data: {
                                appid: '***************', //AppID
                                secret: '*******************', //secret密钥
                                grant_type: 'authorization_code',
                                js_code: res.code
                            },
                            method: 'GET',
                            header: header,
                            success: function (res) {
                                var openid = res.data.openid; //登录之后返回的openid
                                // this.setData({
                                //   openid: res.data.openid
                                // });
                                console.log(openid + '我的openid')
                                wx.setStorageSync('openid', openid) //储存openid
                                if (openid != null & openid != undefined) {
                                    wx.getUserInfo({
                                        success: function (res) {

                                        },
                                        fail: function (res) {
                                            //console.info('用户拒绝授权');
                                        }
                                    });
                                } else {
                                    console.info('获取用户openid失败');
                                }
                            },
                            fail: function (res) {
                                console.info('获取用户openid失败');
                                console.log(error);
                            }
                        })
                    }
                }
            })
        }
    },

    created() {}
}
</script>

<style scoped>
.login-content{
    width: 200px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.btn{
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: #ea5149;
    color: #ffffff;  
}
.main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 260px;
    height: 260px;
    border: 0px solid rebeccapurple;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.main img{
    width: 200px;
    height: 200px;
}
.main div{
    font-size: 20px;
    margin-top: 10px;
}
</style>
